<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 满足有些用户在手机端访问的需要 -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>用户管理</title>
    <!-- 线上环境 -->
    <link rel="stylesheet" href="/static/css/dist/component-min.css">
    <link rel="stylesheet" href="/static/plugins/jbox/jbox-min.css">

    <!--vue-->
    <script src="/static/vue/vue.js"></script>
    <!--element ui-->
    <script src="/static/element/index.js"></script>
    <link rel="stylesheet" href="/static/element/index.css">
    <style>
        .img-delete:before {
            position: absolute;
            top: -5px;
            color: red;
            margin-left: -15px;
            z-index: 999;
        }
    </style>
</head>
<body class="cp-bodybox">
<div id="app">
    <#include "/common/header-fg.html" />

    <div class="container" v-loading.body="loading">
        <div class="inner clearfix">
            <#include "/common/left-menu-fg.html" />

            <div class="content-right">
                <h1 class="content-right-title">Banner管理</h1>
                <el-card class="box-card">
                    <el-form :inline="true" ref="search" :model="search" label-width="80px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="状态">
                                    <el-select v-model="search.state" placeholder="请选择状态">
                                        <el-option
                                                v-for="item in stateList"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <div style="text-align: right">
                                    <el-button type="primary" @click="getBannerList">查询</el-button>
                                    <el-button type="primary" @click="clearQuery">清空查询条件</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-card>
                <el-button type="primary" style="margin: 10px 0" v-if="isPermission('banner:add', user.permissions)" @click="addBanner">添加</el-button>
                <el-card class="box-card" style="margin-top: 10px">
                    <el-table
                            :data="bannerList"
                            border
                            style="width: 100%">
                        <el-table-column
                                type="index"
                                label="序号"
                                width="70">
                        </el-table-column>
                        <el-table-column
                                label="图片">
                            <template scope="scope">
                                <img :src="qiniuUrl + scope.row.bannerUrl" width="auto" height="50">
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="kindName"
                                label="类型">
                        </el-table-column>
                        <el-table-column
                                prop="content"
                                label="内容">
                        </el-table-column>
                        <el-table-column
                                prop="stateName"
                                label="状态">
                        </el-table-column>
                        <el-table-column
                                prop="createUser"
                                label="创建人">
                        </el-table-column>
                        <el-table-column
                                prop="insertTime"
                                :formatter="formatterTime"
                                label="创建时间">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="操作"
                                inline-template>
                            <div style="margin-left: -10px">
                                <el-dropdown>
                                    <el-button size="small" type="primary">
                                        操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                    </el-button>
                                        <el-dropdown-menu slot="dropdown" align="center">
                                            <el-dropdown-item v-if="isPermission('banner:edit', user.permissions)"><el-button @click="edit(row)" size="mini" type="primary" class="el-icon-edit">编辑</el-button></el-dropdown-item>
                                            <el-dropdown-item v-if="isPermission('banner:enable', user.permissions)"><el-button v-if="row.status===0" @click="okListObj(row)" size="mini" type="primary" class="el-icon-edit">启用</el-button></el-dropdown-item>
                                            <el-dropdown-item v-if="isPermission('banner:enable', user.permissions)"><el-button v-if="row.status===1" @click="noListObj(row)" size="mini" type="primary" class="el-icon-edit">禁用</el-button></el-dropdown-item>
                                            <el-dropdown-item v-if="isPermission('banner:delete', user.permissions)"><el-button size="mini" @click="deleteBanner(row)" type="primary" class="el-icon-edit">删除</el-button></el-dropdown-item>
                                        </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @current-change="handleCurrentPageChange"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            layout="total, prev, pager, next"
                            :total="totalCount">
                    </el-pagination>
                </el-card>
            </div>
            <!-- end content-right -->

            <a href="javascript:;" class="btn-leftMenuFold" id="j-btn-leftMenuFold"></a>
        </div>
    </div>
    <!-- end container -->

    <!--gonggao-->

    <!--tip-->
    <div class="footer">© 2017 , Inc. All rights reserved.</div>
    <!-- end footer -->
    <div class="fixedBar" style="right: -78px;">
        <ul>
            <template v-for="(item, index) in leftMenuList">
                <li v-if="index==0" :class="'shopManager' + index + ' cur'"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
                <li v-else :class="'shopManager' + index"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
            </template>
        </ul>
        <a href="javascript:;" class="fixedBar-btn" id="j-fixedBar-btn"></a>
    </div>
    <a href="#" id="j-gotop" class="gotop" title="回到顶部" style="left: 1920.59px;"></a>

    <el-dialog title="添加Banner" v-model="dialogFormVisible">
        <el-card class="box-card">
            <el-form :model="addBannerObj" ref="addBannerObj" label-width="80px">
                <el-form-item label="图片">
                    <el-row>
                        <img height="100" v-if="addBannerObj.bannerUrl !== ''" :src="qiniuUrl + addBannerObj.bannerUrl">
                        <i class="el-icon-circle-close img-delete" v-if="addBannerObj.bannerUrl !== ''" @click="deleteImg">
                        </i>
                        <el-upload
                                style="display: inline-block"
                                action="/file/upload"
                                :before-upload="beforeUpload"
                                :on-success="uploadBannerSuccess"
                                :show-file-list="false">
                            <el-button type="primary" >上传图片</el-button>
                            <div slot="tip" class="el-upload__tip" >只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-row>
                </el-form-item>
                <el-form-item label="类型">
                    <template>
                        <el-radio-group v-model="addBannerObj.kind" style="margin-top: 10px">
                            <el-radio :label="1">商品</el-radio>
                            <el-radio :label="2">分类专题</el-radio>
                            <el-radio :label="3">自定义专题</el-radio>
                            <el-radio :label="4">无连接图片</el-radio>
                            <el-radio :label="5">其他</el-radio>
                        </el-radio-group>
                    </template>
                </el-form-item>
                <el-form-item label="商品" v-if="addBannerObj.kind === 1">
                    <el-tag v-if="addBannerObj.kind === 1 && kindName !== ''"  style="margin-right:5px;">{{kindName}}</el-tag>
                    <el-button type="primary"  @click.native.prevent="showDialog" >选择商品</el-button>
                </el-form-item>
                <el-form-item label="分类专题" v-if="addBannerObj.kind === 2">
                    <el-tag v-if="addBannerObj.kind === 2 && kindName !== ''"  style="margin-right:5px;">{{kindName}}</el-tag>
                    <el-button type="primary"  @click.native.prevent="specialTypeDialog = true" >分类专题</el-button>
                </el-form-item>
                <el-form-item label="自定义" v-if="addBannerObj.kind === 3">
                    <el-tag v-if="addBannerObj.kind === 3 && kindName !== ''"  style="margin-right:5px;">{{kindName}}</el-tag>
                    <el-button type="primary"  @click.native.prevent="specialDialog = true">自定义专题</el-button>
                </el-form-item>
                <el-form-item label="连接地址" v-if="addBannerObj.kind === 5">
                    <el-tag v-if="addBannerObj.kind === 5 && kindName !== ''"  style="margin-right:5px;">{{kindName}}</el-tag>
                    <el-input v-model="addBannerObj.forwardUrl" placeholder="URL连接"></el-input>
                </el-form-item>

            </el-form>
        </el-card>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelBanner">取 消</el-button>
            <el-button type="primary" @click="saveBanner">保 存</el-button>
        </div>
    </el-dialog>
    <yiqi-select-special ref="specialType" :item-common-dialog="specialTypeDialog" :check-list="specialTypeData" :type="0"
                         :limit-num="1" :checked-ids="checkedSpecialTypeIds" :save-callback="saveTypeCallback" :cancel-callback="cancelTypeCallback"></yiqi-select-special>
    <yiqi-select-special ref="special" :item-common-dialog="specialDialog" :check-list="specialData" :type="1"
                         :limit-num="1" :checked-ids="checkedSpecialIds" :save-callback="saveSpecialCallback" :cancel-callback="cancelSpecialCallback"></yiqi-select-special>
    <yiqi-select-item ref="selectItem" :item-common-dialog="selectItemDialog" :check-list="[]" :checked-ids="[addBannerObj.kindId]" :save-callback="saveCallback" :cancel-callback="cancelCallback"></yiqi-select-item>
</div>
<script src="/static/js/dist/lib-min.js"></script>
<script src="/static/js/dist/list.js"></script>
<script src="/static/js/dist/component-min.js"></script>

<!-- 引入api -->
<script src="/static/js/api.js"></script>
<!-- 引入共通js -->
<script src="/static/js/common.js"></script>
<script>
    new Vue({
        el: '#app',
        mounted: function () {
            this.getBannerList();
        },
        data: function(){
            return {
                specialDialog: false,
                specialTypeDialog: false,
                specialData: [],
                specialTypeData: [],
                checkedSpecialTypeIds: [],
                checkedSpecialIds: [],
                loading: false,
                formLabelWidth: '100px',
                dialogFormVisible: false,
                selectItemDialog: false,
                checkedIds: [],
                tableData: [],
                shopNameType: false,
                qiniuUrl: list.qiniuUrl,
                stateList: [
                    {
                        label: '启用',
                        value: 1
                    },
                    {
                        label: '禁用',
                        value: 0
                    }
                ],
                search: {state:''},
                shopTypeList: [],
                addBannerObj: {
                    id: '',
                    kind: '',
                    kindId: '',
                    bannerUrl:'',
                    forwardUrl:''
                },
                kindName: '',
                currentPage: list.currentPage,
                pageSize: list.pageSize,
                totalCount: 0,
                user: ${(user)!'null'},
                headerNavList: list.headerNavList,
                accountNavList: list.accountNavList,
                leftMenuList: list.menu,
                bannerList: []
            }
        },
        methods: {
            edit (row) {
                let that = this;
                if (this.shopTypeList.length === 0) {
                    let loading = this.$loading({fullscreen: true, lock: true});
                    this.$get("/dictionary/list/APP_BANNER_KIND", {}, function (res) {
                        if (res.status === 100) {
                            that.dialogFormVisible = true
                            that.shopTypeList = res.returnValue
                            that.addBannerObj.id = row.id
                            that.addBannerObj.kind = row.kind
                            that.addBannerObj.kindId = row.kindId
                            that.kindName = row.content
                            that.addBannerObj.bannerUrl = row.bannerUrl
                            that.addBannerObj.forwardUrl = row.forwardUrl
                            loading.close();
                        } else {
                            loading.close();
                            that.$alert('服务器错误', '提示', {
                                confirmButtonText: '确定',
                            });
                        }
                    }, function (res) {
                        loading.close();
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    })
                } else {
                    this.dialogFormVisible = true
                    this.addBannerObj.id = row.id
                    this.addBannerObj.kind = row.kind
                    this.addBannerObj.kindId = row.kindId
                    this.kindName = row.content
                    this.addBannerObj.bannerUrl = row.bannerUrl
                    this.addBannerObj.forwardUrl = row.forwardUrl
                }
            },
            deleteImg () {
                this.addBannerObj.bannerUrl = "";
            },
            saveTypeCallback () {
                this.checkedSpecialTypeIds = this.$refs.specialType.checked;
                this.specialTypeData = this.$refs.specialType.checkedData;
                this.addBannerObj.kindId = this.checkedSpecialTypeIds[0]
                this.kindName = this.specialTypeData[0].name
                this.specialTypeDialog = false;
            },
            cancelTypeCallback () {
                this.specialTypeDialog = false;
            },
            saveSpecialCallback () {
                this.checkedSpecialIds = this.$refs.special.checked;
                this.specialData = this.$refs.special.checkedData;
                this.addBannerObj.kindId = this.checkedSpecialIds[0]
                this.kindName = this.specialData[0].name
                this.specialDialog = false;
            },
            formatterTime (row, column) {
                if (row.insertTime !== undefined && (row.insertTime + "").length >= 10) {
                    return (row.insertTime + "").substring(0, 10);
                } else {
                    return row.insertTime;
                }
            },
            cancelSpecialCallback () {
                this.specialDialog = false;
            },
            clearQuery () {
              // 情况查询
                this.search.state = ''
                this.getBannerList()
            },
            handleCurrentPageChange(val) {
                this.currentPage = val
            },
            getBannerList () {
                let that = this;
                let obj = {
                    status: this.search.state,
                    currentPage: this.currentPage,
                    pageSize: this.pageSize
                }
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http("/banner/list", obj, function (res) {
                    if (res.status === 200) {
                        if(res.data.list !== undefined) {
                            that.bannerList = res.data.list
                            that.totalCount = res.data.total;
                            for (let i = 0; i < that.bannerList.length; i++){
//                                that.bannerList[i].bannerUrl = that.qiniuUrl + that.bannerList[i].bannerUrl
                                if (that.bannerList[i].status === 1) {
                                    that.bannerList[i].stateName = '启用'
                                } else {
                                    that.bannerList[i].stateName = '禁用'
                                }
                            }
                        }
                        loading.close();
                    } else {
                        loading.close();
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('服务器错误', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            okListObj (obj) {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http("/banner/enable", {id: obj.id}, function (res) {
                    if (res.status === 200) {
                        for (let i = 0; i < that.bannerList.length; i++){
                            if (that.bannerList[i].id === obj.id) {
                                that.bannerList[i].stateName = '启用'
                                that.bannerList[i].status = 1
                            }
                        }
                        loading.close();
                    } else {
                        loading.close();
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('服务器错误', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            noListObj (obj) {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http("/banner/disable", {id: obj.id}, function (res) {
                    if (res.status === 200) {
                        for (let i = 0; i < that.bannerList.length; i++){
                            if (that.bannerList[i].id === obj.id) {
                                that.bannerList[i].stateName = '禁用'
                                that.bannerList[i].status = 0
                            }
                        }
                        loading.close();
                    } else {
                        loading.close();
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('服务器错误', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            deleteBanner (obj) {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http("/banner/delete", {id: obj.id}, function (res) {
                    if (res.status === 200) {
                        for (let i = 0; i < that.bannerList.length; i++){
                            if (that.bannerList[i].id === obj.id) {
                                that.$alert('删除成功', '提示', {
                                    confirmButtonText: '确定',
                                    callback: function () {
                                        that.bannerList.splice(i, 1)
                                    }
                                });
                            }
                        }
                        loading.close();
                    } else {
                        loading.close();
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('服务器错误', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            addBanner () {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                this.$get("/dictionary/list/APP_BANNER_KIND", {}, function (res) {
                    if (res.status === 200) {
                        that.dialogFormVisible = true
                        that.shopTypeList = res.returnValue
                        loading.close();
                    } else if (res.status === 100){
                        that.dialogFormVisible = true
                        that.shopTypeList = res.returnValue
                        loading.close();
                    } else {
                        loading.close();
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('服务器错误', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            radioFn (value) {
//                let that = this
                this.addBannerObj.kindId = "";
                this.kindName = "";
                this.addBannerObj.kind = value
//                for (let i = 0; i < that.shopTypeList.length; i++){
//                    if (that.shopTypeList[i].kind === value) {
//                        that.addBannerObj.kindId = that.shopTypeList[i].value
//                    }
//                }
            },
            clearForm () {
                this.addBannerObj =  {
                    kind: '',
                    kindId: '',
                    bannerUrl:'',
                    forwardUrl:''
                }
                this.kindName = "";
            },
            cancelBanner () {
                this.clearForm();
                this.dialogFormVisible = false;
            },
            saveBanner () {
                let that = this;
                if (this.addBannerObj.bannerUrl ===''){
                    that.$alert('请添加图片', '提示', {
                        confirmButtonText: '确定',
                    });
                    return
                }
                if (this.addBannerObj.kind === '') {
                    that.$alert('请选择类型', '提示', {
                        confirmButtonText: '确定',
                    });
                    return
                }
                let loading = this.$loading({fullscreen: true, lock: true});
                let url = '/banner/insert'
                let msg = '添加成功'
                if (that.addBannerObj.id !== '' && that.addBannerObj.id !== undefined) {
                    url = '/banner/update'
                    msg = '修改成功'
                }
                this.http(url, that.addBannerObj, function (res) {
                    if (res.status === 200) {
                        that.clearForm();
                        that.$alert(msg, '提示', {
                            confirmButtonText: '确定',
                            callback: function () {
                                that.dialogFormVisible = false
                                that.getBannerList ()
                            }
                        });
                        loading.close();
                    } else {
                        loading.close();
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('服务器错误', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            saveCallback () {
                this.checkedIds = this.$refs.selectItem.checked;
                this.tableData = this.$refs.selectItem.checkedData;
                this.addBannerObj.kindId = this.checkedIds[0]
                this.kindName = this.tableData[0].name
                this.selectItemDialog = false;
            },
            cancelCallback () {
                this.selectItemDialog = false;
            },
            showDialog () {
                this.selectItemDialog = true;
            },
            beforeUpload (file) {
                if (file.type === "image/png") {
                    this.imgType = ".png";
                    return true;
                } else if (file.type === "image/jpeg") {
                    this.imgType = ".jpg";
                    return true;
                } else {
                    this.$message.error('上传头像图片只能是 JPG 或 png 格式!');
                    return false;
                }
            },
            uploadBannerSuccess(response,file){
                if (response.status === 100) {
                    this.addBannerObj.bannerUrl = response.returnValue[0].id + this.imgType;
                } else {
                    this.$alert('上传失败', '提示', {
                        confirmButtonText: '确定',
                    });
                }
            }
        }
    })
</script>

<style>
    .el-table__empty-block {
        position: relative;
        min-height: 60px;
        text-align: center;
        width: 100%;
        height: auto;
    }
</style>

<!-- 20170105 --></body>
</html>